<template>
  <!-- 零部件历史工单 -->
  <view class="partHistory">
    <view class="header" :style="{ top: stickyTop + 'px' }">
      <view class="tabs">
        <view :class="['tabs-item', tabIdx == item.id ? 'act' : '']" v-for="(item, index) in typeList" :key="index"
          @click="handleClickTab(item.id)">{{ item.text }}</view>
      </view>
      <!-- 历史工单提示 -->
      <view class="historyTips">
        <view class="left">{{ title }}</view>
      </view>
    </view>

    <view class="orderListMain">
      <view class="" v-if="list.length">
        <view class="all">
          <view class="year" v-for="(item, index) in list" :key="index">
            <view class="year_item">
              <view class="year_left">
                <view class="yearLabel">
                  {{ item.label }}
                </view>
              </view>

              <view class="year_right">
                <view class="list_item" v-for="(e, i) in item.value" :key="i">
                  <view class="left">{{ e.label.slice(5, 12).replaceAll("-", "/") }}
                    <view class="line"></view>
                  </view>
                  <view class="right">
                    <part-order-card v-for="(v, j) in e.value" :key="j" :item="v"></part-order-card>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="more" @click="handleLoadMore">
          {{ stopQuery ? "- 已经到底了 -" : "点击加载更多" }}
        </view>
      </view>

      <view class="empty" v-else>
        <view class="img">
          <image src="@/static/images/default.png"></image>
        </view>
        <view class="text">- 暂无相关数据 -</view>
      </view>
    </view>
  </view>
</template>

<script>
import PartOrderCard from './components/partOrderCard.vue';
import {
  getAllPlanItem,
  getAllPlanBy,
  getAllPlanWx,
  getAllPlanPj,
} from '@/apis/elevator.js';
export default {
  components: {
    PartOrderCard,
  },
  props: {
    elevatorId: {
      type: String,
    },
    partsId: {
      type: [String, Number],
    },
    stickyTop: {
      type: Number,
    },
    flagMsg: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      typeList: [
        { text: '全部', id: 0 },
        { text: '保养', id: 1 },
        { text: '维修', id: 2 },
        { text: '配件', id: 3 },
      ],
      tabIdx: 0,
      list: [{ label: '2022', value: [{ label: '2022-12-14' }] }],
      curStarDate: new Date().getFullYear(),
      isLoadMore: false,
      stopQuery: false,
      title: '',
    };
  },
  created() {
    // this.fetchOrderList();
  },
  watch: {

  },
  methods: {
    // arrSort(list) {
    //   return list.sort((a, b) => {
    //     return a.createTime > b.createTime ? -1 : 1;
    //   });
    // },
    init() {
      this.curStarDate = new Date().getFullYear();
      this.tabIdx = 0;
      this.fetchOrderList();
    },
    // 点击加载更多
    handleLoadMore() {
      if (this.stopQuery) {
        return;
      }
      this.isLoadMore = true;
      this.stopQuery = false;
      this.curStarDate = this.curStarDate - 1;
      this.fetchOrderList();
    },
    // 首次加载如果为空指标继续加载
    continuereQuest() {
      if (this.curStarDate < 2023) {
        return;
      }
      this.curStarDate = this.curStarDate - 1;
      this.fetchOrderList();
    },
    handleClickTab(res) {
      // console.log("零件切换tab")
      this.tabIdx = res;
      this.isLoadMore = false;
      this.curStarDate = new Date().getFullYear();
      this.title = '';
      this.stopQuery = false;
      this.fetchOrderList();
      // eslint-disable-next-line vue/custom-event-name-casing
      this.$emit('changeTab');
    },
    fetchOrderList() {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      if (!this.isLoadMore) {
        this.list = [];
        this.startDate = new Date().getFullYear();
      }
      const parsms = {
        elevatorId: this.elevatorId,
        startDate: this.curStarDate + '-01-01 00:00:00',
        endDate: this.curStarDate + '-12-31 23:59:59',
        partsId: this.partsId,
        floorStandIds: this.flagMsg.id ? this.flagMsg.id : '',
      };
      const historyFun = [
        getAllPlanItem,
        getAllPlanBy,
        getAllPlanWx,
        getAllPlanPj,
      ];
      historyFun[this.tabIdx]({
        elevatorId: this.elevatorId,
        ...parsms,
      }).then((res) => {
        // console.log(res, 999);
        if (res.data.value.length == 0) {
          // 如果是加载更多
          if (this.isLoadMore) {
            uni.hideLoading();
            this.title = res.data.label;
            this.stopQuery = true;
            return;
          } else {
            // 如果不是加载更多,首次加载再请求
            // console.log("不是加载更多")
            this.continuereQuest();
          }
        }
        this.title = res.data.label;

        let arr = res.data.value;
        // for (let i = 0; i < arr.length; i++) {
        //   console.log( arr[i].value, 33333);
        //   for (let j = 0; j < arr[i].value.length; j++) {
        //     arr[i].value[j].value= this.arrSort( arr[i].value[j].value);

        //   }
        //   // arr[i].value = this.arrSort(arr[i].value);
        // }
        this.list.push(...arr);

        uni.hideLoading();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.partHistory {
  .header {
    position: sticky;
    left: 0;
    z-index: 10;
  }

  .tabs {
    width: 140%;
    background-color: #ffffff;
    display: flex;
    // border-bottom: 2rpx #eee solid;
    height: 76rpx;
    padding: 0 22rpx;
    align-items: center;
    // justify-content: space-between;

    &-item {
      display: flex;
      width: 128rpx;
      height: 44rpx;
      background: #f3f6f8;
      border-radius: 22rpx;
      font-size: 26rpx;
      font-weight: 400;
      // border-bottom: 4rpx solid #fff;
      color: #666;
      transition: 0.4s all;
      justify-content: center;
      align-items: center;
      margin-right: 16rpx;
    }

    .act {
      color: #0091ff;
      background: #dcf0ff;
    }
  }

  .historyTips {
    background-color: #f3f6f8;
    color: #666;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;

    .right {
      width: 300rpx;
    }
  }

  .orderListMain {
    background: #f3f6f8;
    padding: 0 20rpx;

    .content_Tit {
      display: flex;
      justify-content: space-between;

      .date_count {
        font-size: 24rpx;
        color: #666666;
        margin-right: 20rpx;

        text {
          color: #0091ff;
        }
      }
    }

    .date {
      color: #333;
      font-size: 26rpx;
      font-weight: 600;
      padding-left: 40rpx;
      position: relative;
    }

    .line {
      width: 4rpx;
      height: 22rpx;
      background: #333333;
      position: absolute;
      left: 20rpx;
      top: 8rpx;
    }

    .more {
      width: 100%;
      padding: 30rpx 0;
      text-align: center;
      color: #999999;
      font-size: 24rpx;
    }
  }

  .empty {
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 64rpx;
      height: 64rpx;
    }

    height: 800rpx;
    flex-direction: column;
  }

  .year {
    width: 100%;

    .year_item {
      display: flex;
      position: relative;

      .year_left {
        position: absolute;
        left: 0rpx;
        font-size: 28rpx;
        top: 18rpx;
        display: flex;

        .title {
          color: #666;
          font-size: 26rpx;
          padding-left: 42rpx;
        }
      }

      .year_right {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 60rpx;
      }
    }
  }

  .list {
    width: 100%;
    position: relative;
  }

  .list_item {
    display: flex;
    width: 100%;
    position: relative;
    margin-bottom: 16rpx;

    .left {
      position: relative;
      left: 0rpx;
      width: 110rpx;
      top: 18rpx;
      font-size: 26rpx;
      font-weight: 500;

      .line {
        width: 2rpx;
        height: calc(100% - 78rpx);
        background: #d2dae0;
        position: absolute;
        left: 42rpx;
        margin: 20rpx 0;
        top: 32rpx;
      }
    }

    .right {
      width: 100%;
      margin-right: 20rpx;
    }
  }
}
</style>
